<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>购买页面</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}" media="all">
    <!--    导入bootstrap.js之前要先导入依赖的jquery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>
</head>

<body>
<div th:replace="components/public/header :: html"></div>
<br/>
<div class="container">
    <style>
        .lightBlue{
            background-color: #FAFDFF;
            border: 1px solid #A6BFDE;
        }
        .hugeFont{
            font-size: 26px;
        }
        .panel-default>.panel-heading {
            color: #333;
            background-color: #fcfcfc;
            border-color: #ddd;
        }
    </style>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class="panel panel-default lightBlue">
        <div class="row">
            <div class="col-md-10 col-md-push-3">
                <h3 style="padding-bottom: 7px;"><span style="color: orange;" class="glyphicon glyphicon-time"></span> 已为您预定好车票, 请尽快在规定时间内完成订单支付!</h3>
            </div>
        </div>
    </div>

    <div class="panel panel-default lightBlue">
        <div class="panel-heading">
            <div style="font-size: 24px;">订单详情</div>
        </div>
        <div class="panel-body">

            <!-- 票的时间和地点 -->
            <div class="row" >
                <div class="col-md-2" >
                    <p class="hugeFont">G101</p>
                    购买日期
                    <p>2021-05-27 08:40</p>
                </div>
                <div class="col-md-3 col-md-push-1">
                    <p class="hugeFont"><strong th:text="${ticket.fromStation}">广州东</strong></p>
                    出发时间
                    <p th:text="${ticket.departureTime}">06:23</p>
                </div>
<!--                箭头-->
                <div class="col-md-2">
                    <span class="glyphicon glyphicon-arrow-right" style="color: orange;font-size: 60px;"></span>
                </div>
                <div class="col-md-2">
                    <p class="hugeFont"><strong th:text="${ticket.toStation}">北京南</strong></p>
                    到达时间
                    <p th:text="${ticket.arrivalTime}">06:23</p>
                </div>
            </div>

            <!-- 票的具体信息 -->
            <div class="row">
                <table class="table">
                    <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>姓名</th>
                        <th>身份证号</th>
                        <th>车票类型</th>
                        <th>座位号</th>
                        <th>价格</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row" style="padding-left: 30px;" th:text="${ticket.orderId}">1</th>
                        <td th:text="${ticket.realname}">层星系</td>
                        <td th:text="${ticket.identify}">440681200009043111</td>
                        <td th:text="${ticket.seatType}">商务座</td>
                        <td th:text="${ticket.seatNo}">001</td>
                        <td style="color: orange;" th:text="'￥'+${ticket.price}">$2456</td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </div>

    <div class="panel panel-default lightBlue">
        <div class="panel-body" >
            <!-- 票价格 -->
            <div class="row">
                <div class="col-md-2 col-md-push-10">
                    <span style="font-size: 18px;">总计: </span><span style="font-size: 30px;color: orange;" th:text="'￥'+${ticket.price}">$2893</span>
                </div>
            </div>
        </div>
    </div>

    <div>
        <style>
            .cancel{
                background-color: rgb(243, 239, 239);
                border: rgb(94, 94, 94);
            }
            .pay{
                background-color: orange;
                border: orange;
                color: white;
            }
            .mybtn{
                width: 200px;
                height: 50px;
                border-radius: 5px;
                font-size: 25px;
            }
        </style>

        <input type="button" value="取 消" class="mybtn cancel col-md-2 col-md-push-3" id="cancel-btn"/>
        <input type="hidden" th:value="${ticket.orderId}" value="" id="orderId">
        <input type="button" class="mybtn pay col-md-1 col-md-push-5" value="支 付" id="pay-btn"/>
    </div>
    <script>
        let localhost = "http://localhost";
        let host = "http://47.103.125.53";
        $('#pay-btn').click(function () {
            let orderId = $('#orderId').val();
            window.location.href = localhost+"/purchase/pay/"+orderId;
        })
        $('#cancel-btn').click(function () {
            let orderId = $('#orderId').val();
            window.location.href = localhost+"/refund/cancel/"+orderId;
        })
    </script>
</div>

<div th:insert="components/public/footer :: html" style="position: absolute;top: 90%;width: 100%"></div>

</body>
</html>